<template>
  <!-- <div>账户流水管理</div> -->
  <VPage>
    <div class="h-[120px]">
      <CurrencySummary />
    </div>
    <div class="h-[10px] bg-[var(--base-bg-color)]"></div>
    <div class="mx-[10px]">
      <el-tabs v-model="activeName">
        <el-tab-pane label="汇总" name="1"> </el-tab-pane>
        <el-tab-pane label="流水明细" name="2"> </el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == 1">
      <Sum :optionsData="optionsDataAll" />
    </template>
    <template v-else>
      <Detail :optionsData="optionsDataAll" />
    </template>
  </VPage>
</template>
<script setup lang="jsx">
import CurrencySummary from './components/currencySummary/index'
import Sum from "./components/sum/index.vue";
import Detail from "./components/detail/index.vue";
import { getChannelList } from "@/api/index.js";
import { useEnumSelect } from "@/hooks/index.js";
import { getCurrency } from "@/api/index.js";
const activeName = ref("1");
const { options: optionsData } = useEnumSelect({
  /**
   * account_type:账户类型
   */
  params: ["account_type", "capital_flow_type"],
});
//获取币种
const dict = reactive({
  currency: [],
});
const currency = async () => {
  const { data } = await getCurrency();
  dict.currency = data;
};
currency();
const optionsDataAll = computed(() => {
  return Object.assign({}, optionsData.value, dict);
});
const getChannel = async () => {
  const { data } = await getChannelList({
    pageNum: 1,
    pageSize: 100,
  });
  dict.channelList = data || [];
};
getChannel();
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
  margin: 0;
}
</style>
